
.cart-page{
	width: 100%;
	.page-container{
		width: 100%;
		position: relative;
		.cart-title{
			width: 1200px;
			margin: 0 auto;
			padding: 40px 0 90px;
			.text{
				width: 100%;
				padding-bottom: 40px;
				color: #45515e;
				h2{
					font-size: 34px;
					line-height: 40px;
					font-weight: 400;
					text-align: center;
				}
				p{
					position: relative;
					width: 164px;
					margin: 0 auto;
					font-size: 18px;
					line-height: 20px;
					text-align: center;
					span{
						position: relative;
						z-index: 99;
						padding: 0 15px;
						display: inline-block;
						background-color: #fff;
					}
					&::after{
						display: block;
						position: absolute;
						top: 10px;
						left: 0;
						z-index: 9;
						content: "";
						width: 100%;
						height: 1px;
						background-color: #45515e;
					}
				}
			}
			.pay-tip{
				position: relative;
				width: 460px;
				height: 18px;
				margin: 0 auto;
				zoom: 1;
				&::after{
					display: block;
					content: "";
					clear: both;
				}
				.step{
					position: absolute;
					top: 50%;
					z-index: 10;
					width: 10px;
					height: 10px;
					margin-top: -5px;
					background-color: #c8c8c8;
					border-radius: 50%;
					p{
						position: absolute;
						left: 50%;
						top: 26px;
						width: 150px;
						height: 26px;
						margin-left: -75px;
						line-height: 26px;
						text-align: center;
						color: #c8c8c8;
					}
				}
				.step1{
					margin-top: -9px;
					background-color: #fff;
					border: 4px solid #e9546b;
					left: 0;
					margin-left: -5px;
					p{
						color: #e9546b;
					}
				}
				.step2{
					left: 50%;
					margin-left: -5px;
				}
				.step3{
					right: 0;
					margin-right: -5px;
				}
				.line{
					position: absolute;
					top: 8px;
					z-index: 9;
					width: 50%;
					height: 1px;
					background-color: #c8c8c8;
				}
				.line1{
					background-color: #e9546b;
					left: 0;
				}
				.line2{
					right: 0;
				}
			}
		}
		.product-container{
			padding-bottom: 210px;
			width: 1200px;
			margin: 0 auto;
			.list-wrapper{
				width: 1160px;
				margin: 0 auto;
				.cart-img{
					display:block;
					width: 600px;
					height: 300px;
					margin: 100px auto;
					background-image: url(../imgs/cart-img.png);
					background-repeat: no-repeat;
					background-size: cover;
					background-position: 50%;
				}
				.list-header{
					width: 100%;
					line-height: 40px;
					color: #505050;
					zoom: 1;
					&::after{
						display: block;
						content: "";
						clear: both;
					}
					span{
						float: left;
						display: inline-block;
						text-align: center;
					}
					.h-checkall{
						position: relative;
						width: 50px;
						height: 40px;
						background-image: url(../imgs/h-checkall.png);
						background-repeat: no-repeat;
					    background-size: 32px 32px;
						background-position: 50%;
						cursor: pointer;
						i{
							display: inline-block;
							position: absolute;
							top: 0;
							right: -60%;
							font-style: normal;
							line-height: 40px;
							color: #e9546b;
						}
					}
					.h-product{
						width: 310px;
					}
					.h-attr{
						width: 140px;
					}
					.h-amount{
						width: 200px;
					}
					.h-spec{
						width: 110px;
					}
					.h-price{
						width: 120px;
					}
					.h-privilege{
						width: 140px;
					}
					.h-operate{
						width: 90px;
					}
				}
				.list-container{
					width: 100%;
					.list{
						position: relative;
    					width: 100%;
    					border-top: 1px solid #45515e;
    					&::before{
    						display: block;
    						position: absolute;
    						top: 0;
    						left: 50px;
    						content: "";
    						width: 60px;
    						height: 24px;
    						background-image: url(/imgs/list-before.png);
    						background-repeat: no-repeat;
    						background-size: cover;
    						background-position: 50%;
    					}
					}
				}
				.list-footer{
					width: 100%;
					padding-top: 30px;
					border-top: 1px solid #635859;
					zoom: 1;
					&::after{
						display: block;
						content: "";
						clear: both;
					}
					.footer-container{
						float: right;
						height: 60px;
						overflow: hidden;
						zoom: 1;
						&::after{
							display: block;
							content: "";
							clear: both;
						}
						p{
							display: inline-block;
							float: left;
							margin-right: 30px;
							line-height: 80px;
							color: #505050;
							zoom: 1;
							&::after{
								display: block;
								content: "";
								clear: both;
							}
						}
						span{
							display: inline-block;
							float: left;
						}
						.cost-tip{
							margin-left: 10px;
							color: #b4b4b4;
						}
						.dollar{
							position: relative;
							top: -1px;
							margin-left: 5px;
							color: #e9546b;
							font-size: 18px;
						}
						.money{
							position: relative;
							top: -5px;
							color: #e9546b;
							font-size: 30px;
						}
						.settle-btn{
							display: inline-block;
							float: left;
							width: 210px;
							height: 60px;
							line-height: 60px;
							font-size: 18px;
							text-align: center;
							color: #fff;
							background-color: #e9546b;
							border-radius: 2px;
						}
					}
				}
			}
		}
	}
}